💡 สวัสดีจ้าเพื่อน ๆ วันนี้แอดจะพาเพื่อน ๆ มารู้จักกับ Operator จาก JavaScript ที่จะช่วยให้เพื่อน ๆ เข้าถึงข้อมูลใน Object ได้ง่ายมากขึ้น !!
.
🌈 และเจ้านี่คือ...Optional chaining (?.) นั่นเองจ้า จะเป็นยังไง มีรายละเอียด และวิธีการใช้งานยังไง ไปติดตามกันได้ในโพสต์นี้เลยจ้า ~~
.
✨ Optional chaining (?.) - เป็นตัวดำเนินการที่ทำให้เราสามารถอ่านค่าใน Object ที่ซ้อนกันหลาย ๆ ชั้นได้ง่ายมากขึ้น เขียนง่าย และทำให้โค้ดสั้นลงนั่นเอง
.
จริง ๆ แล้วมันก็เหมือนเราใช้ เครื่องหมายจุด (.) นั่นแหละ แต่ความพิเศษของมันก็คือถ้าในกรณีไม่มีค่าใน Object หรือ Function มันจะ Return เป็น Undefined แทน Error
.
👨💻 Syntax
.
obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)
.
📑 วิธีการใช้งาน
.
❤️ ตัวอย่าง 1 : ใช้เข้าถึงข้อมูลใน Object
let customer = {
name: "Mew",
details: {
age: 19,
location: "Ladprao",
city: "bangkok"
}
};
let customerCity = customer.details?.city;
console.log(customerCity);
//output => bangkok
.
❤️ ตัวอย่าง 2 : ใช้กับ Nullish Coalescing
let customer = {
name: "Mew",
details: {
age: 19,
location: "Ladprao",
city: "bangkok"
}
};
const customerName = customer?.name ?? "Unknown customer name";
console.log(customerName); //output => Mew
.
❤️ ตัวอย่าง 3 : ใช้กับ Array
const obj1 = {
arr1:[45,25,14,7,1],
obj2: {
arr2:[15,112,9,10,11]
}
}
console.log(obj1?.obj2?.arr2[1]); // output => 112
console.log(obj1?.arr1[5]); // output => undefined
.
📑 Source : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#javascript #optionalchaining #BorntoDev
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
「undefined javascript」的推薦目錄:
- 關於undefined javascript 在 BorntoDev Facebook 的最佳貼文
- 關於undefined javascript 在 BorntoDev Facebook 的精選貼文
- 關於undefined javascript 在 โปรแกรมเมอร์ไทย Thai programmer Facebook 的精選貼文
- 關於undefined javascript 在 コバにゃんチャンネル Youtube 的精選貼文
- 關於undefined javascript 在 大象中醫 Youtube 的精選貼文
- 關於undefined javascript 在 大象中醫 Youtube 的最讚貼文
- 關於undefined javascript 在 How can I check for "undefined" in JavaScript? [duplicate] 的評價
- 關於undefined javascript 在 執行環境與作用域-not defined VS undefined | 是Ray 不是Array 的評價
- 關於undefined javascript 在 JavaScript undefined 的評價
- 關於undefined javascript 在 What exactly undefined means in JavaScript? Why it's there ... 的評價
undefined javascript 在 BorntoDev Facebook 的精選貼文
💡 เพื่อน ๆ มือใหม่หัดเขียน JavaScript หลาย ๆ คนอาจจะเคยเห็นเครื่องหมาย ?? และ || ในโปรแกรมแล้วไม่รู้ว่ามันคืออะไร และทำงานยังไง วันนี้เรามาไขข้อสงสัยกันเถอะ !! กับสรุปสั้น ๆ วิธีการใช้งาน Nullish Coalescing Operator
.
มันคืออะไร และใช้งานยังไง หากพร้อมแล้วไปอ่านกันเลยจ้าาาาา~~
.
🌟 Nullish Coalescing Operator
.
Nullish Coalescing (??)
เป็นตัวดำเนินการตรรกะที่จะ Return ค่าทางขวามือเมื่อค่าทางซ้ายเป็น Null หรือ Undefined
.
👨💻 Syntax
leftExpr ?? rightExpr
.
📑 ตัวอย่าง
const name1 = null ?? 'Oreo';
console.log(name1);
//output => Oreo
.
OR (||) - เป็นตัวดำเนินการตรรกะ จะ Return ค่าทางขวามือหากทางซ้ายมือเป็นเท็จ (0, ' ', NaN, null, undefined)
.
📑 ตัวอย่าง
let tu = null;
let text = tu || 'stupid!';
console.log(text); // output => stupid!
.
สามารถใช้ร่วมกับ OR (||) และ AND (&&) ได้แต่ต้องใช้วงเล็บ () เพื่อจัดลำดับความสำคัญของตัวดำเนินการด้วยนะ !!
.
📑 ตัวอย่าง OR (||)
let y = (false || true) ?? "foo"
console.log(y) // output => true
.
📑 ตัวอย่าง AND (&&)
let x = (false && true) ?? "foo"
console.log(x) //output => false
.
💥 Source : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
undefined javascript 在 โปรแกรมเมอร์ไทย Thai programmer Facebook 的精選貼文
ภาษาจาวาสคริปต์ ภาษาที่ชื่อเหมือนจาวาแต่คนะละตัว
ภาษาที่ดูเหมือนง่าย เพราะไวยากรณ์คล้ายภาษา C
แต่ถ้าศึกษาลึกๆ แล้ว
เป็นภาษาที่อินดี้
เข้าใจยากที่สุดภาษาหนึ่งก็ว่าได้
.
ตัวอย่างโค้ดในรูปซ้ายและขวา
หน้าตาเหมือนกัน ต่างกันนิดเดียวเอง
ถ้าเป็นภาษาอื่นก็คงรันได้เหมือนกัน
แหมก็โค้ดหน้าตายังกับแฝดอินจัน
.
แต่สำหรับจาวาสคริปต์ที่เป็นเด็กแนว
มันดันทำงานได้ไม่เหมือนกัน ซะงั้น
เพราะฝั่งซ้ายมือท่านผู้ชมรันไม่ผ่าน เกิด error
แต่ฝั่งขวามือทุกท่าน จะรันผ่านซะงั้น ...ปัดโธ่ ชีวิตรนทดเลย
.
.
สำหรับโค้ด 2 ชุดนี้มันมีรายละเอียดที่ซ้อนอยู่
แบบคาดไม่ถึง (แบบต้องอุทาน อ้าวเฮยมีงี้ด้วยเหรอ)
ต้องเซียนจริง เห็นน่าจะเข้าใจ
.
.
ขอเฉลย
ประโยค return จะมีการใส่ ; ให้อัตโนมัติ
จึงทำให้ประโยคถัดมามันเป็น { 'name': 'Somchai',
'age': 59
}
เจตนาประกาศอ๊อบเจ็กต์
แต่ตัวแปลภาษามันเห็นปีกกาลอยๆ ในบรรทัดหลัง return
เลยผิดไวยากรณ์
.
หมายเหตถ้าเราเพิ่ม
var a = { 'name': 'Somchai',
'age': 59
}
.
ก็จะรันผ่าน ไม่เกิด error
เพราะ getData() รีเทิร์น undefined ออกมา
.
.
.
.
.
สำหรับเงื่อนไขที่จาวาสคริปต์จะใส่ ; ให้อัตโนมัติมีดังนี้
1) เมื่อประโยคคำสั่งถัดไป เป็นคนละประโยคคำสั่ง ก็จะใส่ ; ปิดท้ายให้ หรือ ถ้าประโยคคำสั่งเขียนกระจายแยกหลายบรรทัด มันก็จะรู้และใส่ ; ปิดท้ายให้
2) เมื่อบรรทัดถัดไปเริ่มต้นด้วยเครื่องหมาย } ก็จะใส่ ; ต่อท้ายที่บล็อกใกล้ที่สุด
3) เมื่อสิ้นสุดไฟล์ในซอร์สโค้ด ก็จะใส่ ; ต่อท้ายสุดของไฟล์
4) เมื่อมีประโยคคำสั่ง return ในบรรทัด ก็จะใส่ ; ต่อท้ายให้
5) เมื่อมีประโยคคำสั่ง break ในบรรทัด ก็จะใส่ ; ต่อท้ายให้
6) เมื่อมีประโยคคำสั่ง throw ในบรรทัด ก็จะใส่ ; ต่อท้ายให้
7) เมื่อมีประโยคคำสั่ง continue ในบรรทัด ก็จะใส่ ; ต่อท้ายให้
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
📢 <ข่าวประชาสัมพันธ์/>
สำหรับหนังสือ JavaScript
ในตำนานเล่มตามลิงก์นี้ 👇
📘 https://www.se-ed.com/product/พัฒนาเว็บแอปพลิเคชั่นด้วย-JavaScript.aspx?no=9786160825394
.
ถ้าไปดูหน้าเว็บตอนนี้สินค้าหมดแล้ว
เนื่องจากพิมพ์มาจะ 5 ปีแล้วซินะ
จนตอนนี้ก็เหมือนคนแก่ ใกล้จะอำลาโลกนี้
เพราะใกล้หมดสต๊อกในแผงขายหนังสือเต็มทน
และทางซีเอ็ดไม่มีแผนจะตีพิมพ์ซ้ำอีกแล้ว (เศร้าใจจังเลย) 😭😰
.
.
แต่ก็ยังมีสินค้าเหลืออยู่ตามสาขาต่างๆ
สามารถคลิกไปสำรวจดูในแต่ละสาขา
แล้วไปซื้อที่สาขานั้นๆ ไม่ต้องผ่านเว็บ
(แต่เหลือน้อยเเต็มทน)
.
ด้วยเหตุนี้ผู้เขียนจึงรีบทำคลอดเล่มใหม่ ชื่อว่า
📕 "เสียดายไม่ได้อ่าน JavaScript"
.
แท้จริงแล้ว คือร่างกลับชาติมาเกิดใหม่
ของเล่มตำนานดังกล่าว
รีแบรนด์เปลี่ยนชื่อ
เปลี่ยนเนื้อหาข้างใน จากขาวดำ
ให้กลายเป็นมีสีสัน ดูดีมีชีวิตชีวา
พร้อมยัดอาหารสมอง เพิ่มเนื้อหา
แล้วก็อัปเดตยกเครื่องใหม่
.
แต่เนื่องจากถ้าอัปเดตใหม่หมดทั้งเล่ม
ผู้เขียนคงไม่มีเวลาว่างมากพอ
(เขียนไม่ทันพูดกันตรงๆ)
และคิดว่าอีกนานกว่าหลายชาติภพจะแล้วเสร็จ
.
จึงไม่อยากให้ผู้อ่านอดเสพความรู้ใหม่ๆ
เลยรีบทำคลอดให้กลับชาติมาเกิดใหม่ดีกว่า
โดยจำหน่ายเป็นทางอีบุ๊คก่อน
(ยังไม่มีเล่มกระดาษในตอนนี้ รอไปก่อน)
.
แล้วตัดสินใจปล่อยเนื้อหาออกมาเท่านี้ก่อน
เบื้องต้นก็เด็กๆ เอง
ก็แค่ 620 หน้า (≈ 142,638 คำ)
เดี๋ยวค่อยมาปรับปรุงหนังสือภายหลังทางอีบุ๊ค
เพราะมันอัปเดตง่ายดี
.
ให้นึกถึงซื้อโปรแกรมมา
แล้วสามารถอัปเดตเวอร์ชั่นประมาณนั้นแหละ
เล่มอีบุ๊คนี้ก็เช่นกัน อัปเดตให้ครับ
.
ดังนั้นๆ ถ้าเพื่อนๆ อุดหนุนกันแล้ว
อย่าลืมกดซิงก์ เนื้อหาล่าสุดด้วยละ
จะได้อ่านอะไรใหม่ๆ สดๆ อยู่เสมอ
สามารถอัปเดตหนังสือได้ฟรี ไม่เสียเงินแต่ประการใด
.
.
ต้องบอกอย่างนี้ว่า
ในแวดวงการเขียนโปรแกรม ภาษาอย่าง JavaScript
บางคนอาจสับสนกับภาษา Java ชื่อคล้ายกันก็จริงแต่คนละภาษา
ไม่ต่างกับ เมืองไทยประกันชีวิต กับ ไทยประกันชีวิต
ที่บางคนอาจหลงเข้าใจผิดมานานหลายปี
ว่าคือบริษัทเดียวกัน (จริงๆ แล้วไม่ใช่เลย)
.
ไม่เพียงเท่านั้นบางคนอาจคิดว่า ภาษา JavaScript
ทำงานแค่ฝั่ง front-end หรือฝั่งเว็บบราวเซอร์เท่านั้น
(ทำงานควบคู่กับภาษา HTML, CSS)
.
แต่เอาเข้าจริงๆ แล้ว จักรวาลของภาษานี้มันกว้างใหญ่มาก
- เพราะปัจจุบันสามารถนำไปเขียนโปรแกรมฝั่ง back-end ก็ได้ (เช่น ใช้ Node.js รัน JavaScript โดยปราศจากเว็บบราวเซอร์)
- หรือจะนำไปเขียนแอพฯ บนมือถือ (ใช้งานร่วมกับ HTML, CSS)
- หรือจะนำไปใช้งาน Robotics และ IoT (Internet of Things) ก็ได้
- หรือใช้เขียน AI (ปัญญาประดิษฐ์)
- และใช้ทำอย่างอื่น (ตอนนี้ยังนึกไม่ออก)
.
เมื่อดูโครงสร้างของ JavaScript ดูเหมือนจะง่ายนะ
แต่ก็แฝงไว้ด้วยความอินดี้ และลึกลับซ้อนเร้น
จนคนไม่เข้าใจมันมากที่สุด ภาษาหนึ่งในโลกก็ว่าได้
...ประมาณเขียนเสร็จแล้วทิ้งไว้เป็นเดือน พอกลับมาอ่านโค้ดตัวเอง งงว่าฉันเขียนอะไรลงไป
.
ยิ่งถ้าพูดถึงมาตรฐานจาวาสคริปต์ ES6 (ECMAScript 2015)
ที่ออกมาเมื่อปี 2015 ถือว่าเปลี่ยนแปลงครั้งยิ่งใหญ่ในประวัติศาสตร์ของภาษานี้ก็ว่าได้
.
และยังเป็นรากฐานต่อยอดไปศึกษาเฟรมเวิร์ค/ไลบรารี่ ของภาษาตระกูล JavaScript หลายตัว
อาทิ Angular, React, Vue เป็นต้น
ก็สามารถทำได้ง่ายแหละ
.
ปัจจุบัน JavaScript มันก็ออกมาตรฐานใหม่มาเรื่อย ๆ ให้คนหายคิดถึง ดังนี้ (หรืออาจบ่นว่าออกมาทำไมถี่จัง!!)
-ES7 (ECMAScript 2016) ออกมาเมือปี 2016
-ES8 (ECMAScript 2017) ออกมาเมือปี 2017
-ES9 (ECMAScript 2018) ออกมาเมือปี 2018
-ES10 (ECMAScript 2019) ออกมาเมือปี 2019
-ES11 (ECMAScript 2020) ออกมาเมือปี 2020
-ES12 (ECMAScript 2021) ออกมาเมือปี 2021
.
เมือถึงตอนนี้ ไม่ต้องซีเรียสนะครับ ว่าจะเรียนรู้ JavaScript ไม่ทัน
เพราะเวอร์ชั่นหลัง มันอัปเกรตทีละเล็กทีละน้อย
แต่ ES6 คือจุดเปลี่ยนสำคัญ
ถ้าเริ่มศึกษาจาวาสคริปต์ยุคใหม่ก็เริ่มตั้งแต่ ES6 ขึ้นไปเลย
เอาเป็นว่าหัวใจหลักของภาษานี้ยุคใหม่ ขอขีดเส้นใต้ไว้ตรงนี้ว่า
คือมาตรฐาน ES6 ใช้หางาน หาเงินได้จริงในยุคนี้
.
ขอบอกก่อน เนื้อหา ES6 มันเยอะมากๆๆๆ
ถ้าใครเคยเรียน JavaScript แบบเก่าอาจรู้สึกว่า ช่างไม่คุ้นเคยกับมาตรฐานใหม่เสียจริง
... จนรู้สึกว่าสิ่งที่เคยศึกษามาใน JavaScript แบบเดิมมา มันหมดอายุไปแล้ว
... อารมณ์ ES6 เป็นเหมือนซุปเปอร์เซตของ ES5 (มาตรฐานตัวเก่า) อีกที
(ถ้าใครดูการ์ตูนดราก้อนบอล ก็ให้คิดว่า ES6 มันคือร่างซุปเปอร์ไซย่าแล้วกันนะ)
.
ผู้เขียนเลยรังสรรค์สร้างผลงาน
เป็นหนังสือ "เสียดายไม่ได้อ่าน JavaScript"
เนื้อหาเล่มนี้หนักไปทาง JavaScript ล้วนๆ
จะไม่กล่าวถึง HTML, CSS เท่าไรนัก
หากใครซื้อไป หมายมั่นว่าจะเอาไปดูตัวอย่างเขียนเว็บไซต์
อาจผิดหวังนิดหนึ่ง
...เพราะเล่มนี้เน้นที่ไวยากรณ์ของ ES6 ขึ้นไป เป็นหลัก
.
+++++หนังสือเล่มนี้เหมาะกับใคร ++++++++.
1) คนที่เขียนเว็บอยู่แล้วด้วยภาษา HTML, CSS, JavaScript
2) คนที่ใช้ภาษา JavaScript ฝั่ง back-end รันโดยไม่ง้อเว็บบราเซอร์
3) คนที่ใช้เฟรมเวิร์ค/ไลบรารี่ ของภาษา JavaScript เช่น Angular, React, Vue เป็นต้น
4) คนที่ใช้ HTML, CSS, JavaScript เขียนแอพบนมือถือ
5) คนที่สนใจนำ JavaScript ไปใช้งาน Robotics และ IoT (Internet of Things)
6) คนที่น่าตาดี และชอบซื้อเอาไปนอนหนุน ...เฮยไม่ช่าย แซวเล่นครับ เหมาะกับคนที่เรียนด้านคอมฯ หรือสนใจเขียนโปรแกรมทุกท่าน
.
ตอนนี้ยังไม่มีเล่มกระดาษขาย
อ่านเป็นแบบ ebook อย่างเดียว
(ไม่มี pdf แจก ปรินต์ออกมาไม่ได้)
.
สั่งซื้อได้ที่ลิงก์นี้
👉 https://www.mebmarket.com/web/index.php?action=BookDetails&data=YToyOntzOjc6InVzZXJfaWQiO3M6NzoiMTcyNTQ4MyI7czo3OiJib29rX2lkIjtzOjY6IjE1Njg1NCI7fQ
.
ตัวอย่างหนังสือ
https://drive.google.com/file/d/1Nu6DUFf0q1TPXXnp8KEyXliLS7QGPM2_/view
.
+++++ ราคา ++++++++
ถ้าซื้อผ่าน Web,Android ราคาปกติ 295 บาท
ถ้าซื้อผ่าน Apple ราคาปกติ $10.99(฿329)
.
วิธีการซื้อ
1) สมัครเป็นสมาชิกเว็บ www.mebmarket.com ก่อน
2) ดาวน์โหลดแอพของ meb ค้นหาชื่อ meb นี้แหละ
(ถ้าจะอ่านบน desktop ก็ดาวน์โหลดโปรแกรมาก่อน)
3) แล้วสั่งซื้อ โอนเงินก็ตามรายละเอียดที่เว็บแนะนำครับผม
4) จากนั้นก็ใช้โปรแกรม หรือแอพของ meb เปิดอ่านหนังสือครับผม
5) ถ้ามีปัญหาติดต่อทางทีม support@mebmarket.com เขาจะให้คำตอบคำผม
(พอดีฝากขายที่นี้ด้านเทคนิคพวกนี้ผมจะไม่รู้ครับ)
.
ถ้าเพื่อนๆ ที่อ่านหนังสือผ่านระบบ iOS
เวลาจะชำระเงิน ไม่ควรจ่ายผ่านบัตร
เพราะจะซื้อหนังสือแพงขึ้นครับ
.
แนะนำให้ชำระเงิน
- โดยให้เปิดเว็บ https://www.mebmarket.com
- แล้ว login ด้วย username เดียวกับที่เราใช้ใน app บน iOS
- หลังจากนั้นก็เลือกซื้อหนังสือปกติ
.
ซื้อเสร็จแล้วมันจะไปโผล่ใน app บน iOS
จากนั้นเพื่อนสามารถเข้าใช้งานด้วย username และ password อันเดียวกันกับหน้าเว็บเลยครับ
จะซื้อได้ในราคาที่เห็นตามเว็บนี้ (ไม่แพง)
.
.
สำหรับวิธีอ่านอีบุ๊กเล่มนี้
ก็ต้องเลือกโปรแกรม/แอพ ให้เหมาะกับระบบที่เราใช้อยู่
วิธีอ่านอีบุ๊กก็ตามลิงก์ต่อไปนี้
https://docs.google.com/document/d/e/2PACX-1vSI4hZgymHgbqhX3CA6anA_18wRy-iXU9oIlupUr-KwAWvJyxI9zdLrJcPUW77xz8lbvRFfW10747Oe/pub
.
✍ เขียนโดย โปรแกรมเมอร์ไทย thai programmer
undefined javascript 在 コバにゃんチャンネル Youtube 的精選貼文
undefined javascript 在 大象中醫 Youtube 的精選貼文
undefined javascript 在 大象中醫 Youtube 的最讚貼文
undefined javascript 在 執行環境與作用域-not defined VS undefined | 是Ray 不是Array 的推薦與評價
not defined 以及undefined 也是JavaScript 中相當重要的觀念,若可以搞懂這兩者的差異,對於debug 上是非常有幫助的。 ... <看更多>
undefined javascript 在 JavaScript undefined 的推薦與評價
JavaScript also has null value. Besides, it has undefined value. And both null and undefined values represent empty values in JavaScript. What is undefined. ... <看更多>
undefined javascript 在 How can I check for "undefined" in JavaScript? [duplicate] 的推薦與評價
... <看更多>
相關內容